import styled from 'styled-components'
// `${()=>(expression)}`中${(props)=>(expression)}的值就是箭头函数的返回值expression,箭头函数的props就是父组件通过props方式传递给样式组件实例的属性


// 使用attrs()给样式组件添加预设属性，
// 预设的属性跟使用组件标签时添加的属性一样，都可以在模板字符串的箭头函数的形参拿到，都遵循非标准dom标签属性不被渲染到标签上的原则
export const Input = styled.input.attrs(props => ({
    // we can define static props
    type: "text",
  
    // or we can define dynamic ones
    size: props.size||"16px",
    className:'one',
    index:1
  }))`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
  
    /* here we use the dynamically computed prop */
    margin: ${props => props.size};
    padding: ${props => props.size};
  `; 